<template>
    <div v-if="isClick" class="bg-black border-white border text-white font-Inconsolata bg-opacity-60">
        <div class=" overflow-y-auto h-full grid-cols-3 grid">
            <p class="col-span-3 place-self-center">Switch 1</p>
            <p>源交换机</p>
            <p>目的交换机</p>
            <p>数据包数</p>
            <p>S1</p>
            <p> S2</p>
            <p> {{ data[0] }} </p>
            <p>S1</p>
            <p> S3</p>
            <p> {{ data[1] }} </p>
            <p>S1</p>
            <p> S4</p>
            <p> {{ data[2] }} </p>
        </div>
        <button @click="isClick = false" class="absolute right-4 top-0">
            <i class="ri-close-line text-3xl"></i>
        </button>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import { useGlobalState } from "@/store";
import { rand } from "@vueuse/core";
const isClick = defineModel({ local: true, default: false })
const { isEase } = useGlobalState()
const data = ref(isEase.value ? [96000, 515, 270] : [96000, 181, 206])
const intervalId = setInterval(() => {
    if (isEase.value) {
        data.value[0] += 1000 + rand(-100,100)
        data.value[1] = rand(550, 700)
        data.value[2] = rand(250, 350)
    } else {
        data.value[0] += 1000+ rand(-100,100)
        data.value[1] = rand(180, 220)
        data.value[2] = rand(180, 220)
    }
}, 2000)
onBeforeUnmount(() => clearInterval(intervalId))
</script>